<template>
  <div class="main-box">
    <h1>欢迎来到{{ msg }}运维系统</h1>
    <div class="general">详细数据</div>
    <div class="echartTab">
      <!-- <Button>今天</Button>
      <Button>昨天</Button>
      <Button>近7天</Button>
      <Button>近30天</Button> -->
      <RadioGroup @on-change="selectRadio" v-model="curButton" type="button">
        <Radio label="今天"></Radio>
        <Radio label="昨天"></Radio>
        <Radio label="近7天"></Radio>
        <Radio label="近30天"></Radio>
      </RadioGroup>
      <!-- <DatePicker
        type="datetimerange"
        placeholder="Select date and time"
        style="width: 300px"
      ></DatePicker> -->
      <DatePicker @on-change="timePicker" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></DatePicker>
      <Dropdown @on-click="chooseArea" style="margin-left: 20px">
        <Button>
          {{ area }}
          <Icon type="ios-arrow-down"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="国内">国内</DropdownItem>
          <DropdownItem name="国外" disabled>国外</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Button type="primary" @click="search">查询</Button>
    </div>
    <!-- <div class="generalData">
      <span>当前直播点：</span>
      <span>在线人数：</span>
      <span>消耗流量：</span>
      <span style="opacity: 0">平均直播时间：</span>
    </div>
    <div class="echarts">
      <IEcharts :option="bar" :resizable="true" @ready="onReady" :loading="loading" @click="onReady"></IEcharts>
    </div>
    <div class="echarts">
      <IEcharts :option="bar2" :resizable="true" @ready="onReady" :loading="loading" @click="onReady"></IEcharts>
    </div> -->
    <pageTable
      :columns="columns"
      :list="operatorData"
      :loading="isShowLoad"
      :totalCount="totalCount"
      :currentPageNum="pageNum"
      @change-page="changePage"
    ></pageTable>
    <Modal v-model="modal1" title="详情" @on-ok="ok" @on-cancel="cancel">
      <div class="echarts">
        <IEcharts
          :option="bar"
          :resizable="true"
          @ready="onReady"
          :loading="loading"
          @click="onReady"
        ></IEcharts>
      </div>
    </Modal>
  </div>
</template>

<script>
import IEcharts from "vue-echarts-v3/src/full.js";
import { getOperators, getOperatorData } from "../../api/common";
// import { mapActions, mapMutations } from "vuex";
export default {
  inject: ["globalData"],
  components: { IEcharts },
  data() {
    return {
      modal1: false,
      curButton: "今天",
      msg: "",
      area: "国内",
      loading: false,
      bar: {
        title: {
          text: "在线人数",
        },
        tooltip: {},
        xAxis: {
          data: [],
        },
        yAxis: {
          min:0,
          minInterval:1,
        },
        series: [
          {
            name: "peopleCount",
            type: "line",
            data: [],
          },
        ],
        color: ["#95C7DA"],
      },
      bar2: {
        title: {
          text: "实时流量",
        },
        tooltip: {},
        xAxis: {
          data: [
            "Shirt",
            "Sweater",
            "Chiffon Shirt",
            "Pants",
            "High Heels",
            "Socks",
          ],
        },
        yAxis: {
          min:1,
          minInterval:1,
        },
        series: [
          {
            name: "Sales",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
        color: ["#95C7DA"],
      },
      columns: [
        {
          title: "运营点ID",
          key: "stream",
          align: "center",
          width: 120,
        },
        {
          title: "直播时长/min",
          key: "time",
          align: "center",
          minWidth: 90,
        },
        {
          title: "在线人数/人",
          key: "people",
          align: "center",
          minWidth: 90,
        },
        {
          title: "消耗流量/Mbps",
          key: "flow",
          align: "center",
          minWidth: 90,
        },
        {
          title: "数据详情",
          // key: "ID",
          align: "center",
          minWidth: 90,
          render: (h, params) => {
            let obj = {
              props: {
                type: "primary",
                size: "small",
              },
              // style: { marginRight: "20px" },
              on: {
                click: (e) => {
                  e.stopPropagation();
                  this.getOperatorData(params.row);
                },
              },
            };
            return h("Button", obj, "查看详情");
          },
        },
      ],
      isShowLoad: false,
      pageNum: 1,
      totalCount: 0,
      operatorData: [],
      params: {
        start: parseInt(
          new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000
        ),
        end: parseInt(new Date().getTime() / 1000),
        type: "m", //（必须m:分h:小时d：一天）
        stream: "",
      },
    };
  },
  methods: {
    chooseArea(area) {
      this.area = area;
    },
    getOperators() {
      getOperators(this.params).then((data) => {
        if (data.code == 200) {
          // this.operatorData = data.data.info.map((ele) => {
          //   return {stream: ele.stream, time: ele.time, people: ele.people, ConsumeMbps: (30 * ele.people * ele.time).toFixed(2)}
          // });
          this.operatorData = data.data.info;
          this.totalCount = data.data.info.length;
        }
      });
    },
    getOperatorData(obj) {
      this.modal1 = true;
      this.params.stream = obj.stream;
      getOperatorData(this.params).then((data) => {
        if (data.code == 200) {
          this.bar.series[0].data = data.data.info.map((item) => item.total);
          this.bar.xAxis.data = data.data.info.map((item) => item.date);
        }
      });
    },
    selectRadio() {
      this.params.end = parseInt(new Date().getTime() / 1000);
      this.params.type = "m";
      switch (this.curButton) {
        case "今天":
          this.params.start = parseInt(
            new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000
          );
          break;
        case "昨天":
          this.params.start = parseInt(
            (new Date(new Date().setHours(0, 0, 0, 0)).getTime() -
              24 * 60 * 60 * 1000) /
              1000
          );
          this.params.end = parseInt(
            new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000
          );
          break;
        case "近7天":
          this.params.type = "d";
          this.params.start = parseInt(
            (new Date(new Date().setHours(0, 0, 0, 0)).getTime() -
              7 * 24 * 60 * 60 * 1000) /
              1000
          );
          break;
        case "近30天":
          this.params.type = "d";
          this.params.start = parseInt(
            (new Date(new Date().setHours(0, 0, 0, 0)).getTime() -
              30 * 24 * 60 * 60 * 1000) /
              1000
          );
          break;
      }
      console.log("start: ", new Date(this.params.start * 1000));
      console.log("end: ", new Date(this.params.end * 1000));
      this.getOperators();
    },
    changePage(index) {
      this.pageNum = index;
      this.getOperators();
    },
    timePicker(date) {
      if(date[0] && date[1]) {
        this.params.start = parseInt(new Date(date[0]).getTime() / 1000);
        this.params.end = parseInt(new Date(date[1]).getTime() / 1000);
        this.params.type = "m";
        let duration = new Date(date[1]).getTime() - new Date(date[0]).getTime();
        if(duration > 7*24*60*60*1000) {
          this.params.type = "d";
        }
      }
    },
    search() {
      this.curButton = "";
      this.getOperators();
    }
  },
  mounted() {
    this.msg = this.util.platform;
    this.getOperators();
  },
};
</script>

<style lang="less" scoped>
.general {
  height: 40px;
  border: 1px solid #c8dee9;
  line-height: 40px;
  padding-left: 10px;
  color: #6080b3;
  font-size: 16px;
  background-color: #e8f0f5;
}
.generalData {
  height: 70px;
  font-size: 14px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
}
.echartTab {
  height: 50px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  & > Button {
    margin: 2px;
  }
}

h1 {
  text-align: center;
}
.main_header {
  width: 100%;
  height: 36px;
  display: flex;
  justify-content: center;
}

.echarts {
  margin-top: 30px;
  width: 100%;
  height: 230px;
}
</style>
